<!doctype html>
<html>

<head>

  <meta charset="utf-8">
  <script src="../../umd/d3plus-core.full.js"></script>

  <style>

    body {
      margin: 0;
      overflow: hidden;
    }

  </style>

</head>

<body></body>

<script>

  var nodes = [
    {id: "alpha",   x2: 1,   y2: 1},
    {id: "beta",    x2: 2,   y2: 1},
    {id: "gamma",   x2: 1,   y2: 2},
    {id: "epsilon", x: 3,   y: 2},
    // {id: "zeta",    x: 2.5, y: 1.5},
    // {id: "theta",   x: 2,   y: 2}
  ];

  // var links = [
  //   {source: 0, target: 1, weight: 10},
  //   {source: 0, target: 2, weight: 100},
  //   {source: 3, target: 4, weight: 50},
  //   {source: 3, target: 5, weight: 60},
  //   {source: 5, target: 0, weight: 12}
  // ];

  // links.forEach(link => {
  //   link.source = nodes[link.source];
  //   link.target = nodes[link.target];
  // });

  const colors = {"10":"#EDE6D9","11":"#105B10","12":"#3ab11a","13":"#D66011","14":"#752277","15":"#5E1F05","16":"#17BCEF","17":"#9edae5","18":"#AA1F61","19":"#A4BD99","20":"#7F7F7F","21":"#93789E","22":"#C7C7C7","1":"#FFE999","2":"#FFC41C","3":"#E0902F","4":"#D1FF00","5":"#330000","6":"#E377C2","7":"#f7b6d2","8":"#98df8a","9":"#B00000"};

  var links = [
    {source: "alpha", target: "beta", weight: 10},
    {source: "alpha", target: "gamma", weight: 100},
    {source: "gamma", target: "epsilon", weight: 50},
    // {source: "gamma", target: "zeta", weight: 60},
    // {source: "zeta", target: "alpha", weight: 12}
  ];

  const data = [
    {id: "alpha", value: 0.4},
    {id: "beta", value: 0.5},
    // {id: "gamma", value: 1}
  ];

  // const data2 = [
  //   {id: "alpha", value: 0.4},
  //   {id: "beta", value: 0.5}
  // ];

  const limitRCA = 1;

  const network = new d3plus.Network()
    .links(links)
    .nodes(nodes)
    .data(data)
    .shapeConfig({
      fill: d => d.value ? "red" : "grey"
    })
    // .colorScale("value")
    // .data("./oec2018.json")
    // .nodes("./network_hs4.json", d => d.nodes)
    // .links("./network_hs4.json", d => d.edges)
    // .config({
    //   groupBy: ["Section ID", "HS4 ID"],
    //   legend: false,
    //   shapeConfig: {
    //     fill: d => d["Trade Value RCA"] >= -1 ? d["Trade Value RCA"] > limitRCA ? colors[d["Section ID"]] ||  "#b1bac6" : "#b1bac6" : "#b1bac6",
    //     // Circle: {
    //     //   fill: d => "red"
    //     // },
    //     // Path: {
    //     //   stroke: d => "blue"
    //     // }
    //   },
    //   size: d => parseInt(d["Trade Value"]) || 2,
    //   sizeMin: 4,
    //   sizeMax: 15,
    // })
    // .config({
    //   colorScale: d => d.value || 0,
    //   shapeConfig: {
    //     fill: "D3PLUS-COMMON-RESET",
    //     Circle: "D3PLUS-COMMON-RESET"
    //   }
    // })
    .render();

  // setTimeout(() => {
  //   network
  //     // .data("./oec2017.json")
  //     .nodes("./network_hs4.json", d => d.nodes)
  //     // .links("./network_hs4.json", d => d.edges)
  //     .render();
  // }, 3000);

</script>

</html>
